<template>
  <div>
    <!-- 缩放按钮、指北针等可继续保留/优化 -->
    <div class="absolute top-4 left-24 bg-white rounded shadow hidden">
      <button @click="zoomIn" class="p-2 hover:bg-gray-100">
        <span class="text-lg">+</span>
      </button>
      <button @click="zoomOut" class="p-2 hover:bg-gray-100 border-t">
        <span class="text-lg">-</span>
      </button>
    </div>
    <div class="absolute top-4 left-40 bg-white p-2 rounded shadow hidden">
      <div class="w-8 h-8 relative">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="w-0 h-0 border-l-4 border-r-4 border-b-8 border-transparent border-b-black"></div>
        </div>
        <div class="absolute inset-0 flex items-center justify-center text-xs">N</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import maplibregl from 'maplibre-gl'

const props = defineProps({
  map: {
    type: Object,
    required: true
  }
})

const scaleText = ref('1:1000')
const mousePosition = ref('')

// 更新比例尺
const updateScale = () => {
  if (!props.map) return
  const zoom = props.map.getZoom()
  const scale = Math.round(1000 * Math.pow(2, zoom))
  scaleText.value = `1:${scale}`
}

// 更新鼠标位置
const updateMousePosition = (e) => {
  if (!props.map) return
  const lngLat = e.lngLat
  mousePosition.value = `经度: ${lngLat.lng.toFixed(4)}, 纬度: ${lngLat.lat.toFixed(4)}`
}

// 缩放控制
const zoomIn = () => {
  if (!props.map) return
  props.map.zoomIn()
}

const zoomOut = () => {
  if (!props.map) return
  props.map.zoomOut()
}

// 事件监听
onMounted(() => {
  if (props.map) {
    props.map.on('zoom', updateScale)
    props.map.on('mousemove', updateMousePosition)
    updateScale()
  }
})

onUnmounted(() => {
  if (props.map) {
    props.map.off('zoom', updateScale)
    props.map.off('mousemove', updateMousePosition)
  }
})
</script> 